<template>
  <div class="body">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
      <div class="left">
        <img src="https://likede2-admin.itheima.net/img/logo.3673fab5.png" alt />
      </div>
      <div class="right">
        <div class="pic">
          <img
            src=""
            alt
          />
        </div>
        <div class="box1">
          <span>欢迎您， {{username}}</span>
          <span class="active" @click="deladd">退出</span>
          <i class="el-icon-caret-bottom while" @click="deladd"></i>
        </div>
      </div>
    </el-row>
    <el-container>
 <el-aside width="185px">
          <el-col :span="24" active-text-color="#5f84ff">
            <el-menu>
              <el-menu-item index="1" @click="$router.push('/homemain')">
                <i class="element-icons el-icon-fangzi" style="margin-right: 14px;font-size: 20px;"></i>
                <span slot="title">帝可得</span>
              </el-menu-item>
              <el-submenu index="2" >
                <template slot="title">
                  <i
                    class="element-icons el-icon-gongdan"
                    style="margin-right: 14px;font-size: 20px;"
                  ></i>
                  <span>工单管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="2-1"
                    class="item"
                    @click="$router.push('/business')"
                    >运营工单</el-menu-item
                  >
                  <el-menu-item
                    index="2-2"
                    class="item"
                    @click="$router.push('/operation')"
                    >运维工单</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i
                    class="element-icons el-icon-dianweizongshu"
                    style="margin-right: 14px;font-size: 20px;"
                  ></i>
                  <span>点位管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="3-1"
                    class="item"
                    >区域管理</el-menu-item
                  >
                  <el-menu-item
                    index="3-2"
                    class="item"
                    >点位管理</el-menu-item
                  >
                  <el-menu-item
                    index="3-3"
                    class="item"
                    >合作商管理</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="element-icons el-icon-shebei" style="margin-right: 14px;font-size: 20px;"></i>
                  <span>设备管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="4-1"
                    class="item"
                    >设备管理</el-menu-item
                  >
                  <el-menu-item
                    index="4-2"
                    class="item"
                    >设备状态</el-menu-item
                  >
                  <el-menu-item
                    index="4-3"
                    class="item"
                    >设备状态管理</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="element-icons el-icon-renyuan" style="margin-right: 14px;font-size: 20px;"></i>
                  <span>人员管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="5-1"
                    class="item"
                    >人员列表</el-menu-item
                  >
                  <el-menu-item
                    index="5-2"
                    class="item"
                    >人效统计</el-menu-item
                  >
                  <el-menu-item
                    index="5-3"
                    class="item"
                    >工作量列表</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="6">
                <template slot="title">
                  <i class="element-icons el-icon-shangpinguanli" style="margin-right: 14px; font-size: 20px;"></i>
                  <span>商品管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="6-1"
                    class="item"
                    >商品类型</el-menu-item
                  >
                  <el-menu-item
                    index="6-2"
                    class="item"
                    >商品管理</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="7">
                <i
                  class="element-icons el-icon-dengpao"
                  style="margin-right: 14px; font-size: 20px; "
                ></i>
                <span slot="title"
                  >策略管理</span
                >
              </el-menu-item>
              <el-menu-item index="8">
                <i
                  class="element-icons el-icon-dingdanguanli"
                  style="margin-right: 14px; font-size: 20px;"
                ></i>
                <span slot="title"
                  >订单管理</span
                >
              </el-menu-item>
              <el-menu-item index="9">
                <i class="element-icons el-icon-duizhangguanli-01" style="margin-right: 14px;font-size: 20px;"></i>
                <span slot="title"
                  >对账统计</span
                >
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-aside>
  <el-main>
    <router-view></router-view>
  </el-main>
</el-container>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'DekedeIndex',
  data () {
    return {
    }
  },
  computed: {
    ...mapState('user', ['username'])
  },
  methods: {
    ...mapMutations('user', ['removetoken']),
    deladd () {
      this.removetoken('')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.body {
background-color: #f8fafd;
}
.el-row {
  margin-bottom: 20px;
  position: relative;
  &:last-child {
    margin-bottom: 0;
  }
  .left {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 5px;
    margin-left: 14px;
    width: 88px;
    height: 36px;
    z-index: 9999;
    img {
      width: 100%;
    }
  }
  .right {
    position: absolute;
    top: 0;
    z-index: 8888;
    right: 0;
    margin-top: -25px;
    margin-right: 10px;
    .pic {
      width: 35px;
      height: 35px;
      margin: 0px -50px;
      img {
        padding: 30px;
        width: 100%;
      }
    }
    .box1 {
      span {
        display: inline-block;
        margin-left: 30px;
        color: #fff;
      }
      /deep/.while {
        cursor:pointer;
        color: #fff !important;
      }
    }
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1999;
  background-image: url();
  background-size: cover;
  background-repeat: no-repeat;
}
.grid-content {
  min-height: 36px;
}
.active {
  cursor:pointer;
}
 .el-container {
  position: fixed!important;
  top: 100;
  left: 0;
  margin-top: 30px;
  position: relative;
  min-height: calc(100% - 67px);
  height: 800px;
  background-color: #f8fafd;
  &::-webkit-scrollbar {
    width: 0;
  }
  position: relative;
  .el-aside {
    height: 100%;
    overflow: auto;
    background-color: #fff;
    position: relative;
    &::-webkit-scrollbar {
      width: 0;
    }
    .el-menu-item {
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      &:hover {
        background-color: #fff;
      }
    }
  }
}
.item {
  color: #999;
  text-align: left;
  margin-left: 17px;
}
.is-active {
  color: #5f84ff;
}
</style>
